<template>
  <div class="app-container">
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane label="基础信息" class="form-tabs-tab-pane">
            <!-- 标题 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.title')" prop="title">
                  <el-input
                    v-model="form.title"
                    :placeholder="$t('news.title_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 副标题 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.subtitle')"
                  prop="subtitle"
                >
                  <el-input
                    v-model="form.subtitle"
                    :placeholder="$t('news.subtitle_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 来源 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.source')" prop="source">
                  <el-input
                    v-model="form.source"
                    :placeholder="$t('news.source_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 作者 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.author')" prop="author">
                  <el-input
                    v-model="form.author"
                    :placeholder="$t('news.author_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 封面图 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.cover_image')"
                  prop="cover_image"
                >
                  <jsp-image-upload
                    :default-list="cover_imageList"
                    @success="handleImageUploadSuccss"
                    @change="handleImageUploadChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 关键词 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.keywords')" prop="keywords">
                  <jsp-tags
                    :data="form.keywords"
                    :limit="20"
                    @change="(tags) => (form.keywords = tags)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 摘要 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.description')"
                  prop="description"
                >
                  <el-input
                    v-model="form.description"
                    type="textarea"
                    :placeholder="$t('news.description_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 内容 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.content')" prop="content">
                  <jsp-ckeditor id="content" v-model="form.content" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 链接地址 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.href')" prop="href">
                  <el-input
                    v-model="form.href"
                    :placeholder="$t('common.href_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 打开方式 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.href_target')"
                  prop="href_target"
                >
                  <el-select
                    v-model="form.href_target"
                    :placeholder="$t('common.href_target_tips')"
                    clearable
                  >
                    <el-option label="本窗口" value="_self" />
                    <el-option label="新窗口" value="_blank" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 链接关系XFN -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.rel')" prop="rel">
                  <el-select
                    v-model="form.rel"
                    :placeholder="$t('common.rel_tips')"
                    clearable
                  >
                    <el-option label="禁止搜索引擎跟踪链接" value="nofollow" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 浏览量 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.hits')" prop="hits">
                  <el-input
                    v-model="form.title"
                    :placeholder="$t('common.hits_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 推荐类型 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.recommend_type')"
                  prop="recommend_type"
                >
                  <el-checkbox-group v-model="form.recommend_type">
                    <el-checkbox label="首页头条" name="recommend_type" />
                    <el-checkbox label="栏目推荐位" name="recommend_type" />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 是否置顶 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.is_top')" prop="is_top">
                  <el-select
                    v-model="form.is_top"
                    :placeholder="$t('common.pleaseSelect')"
                    clearable
                  >
                    <el-option
                      v-for="item in isTopOptions"
                      :key="item.id"
                      :label="item.text"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 创建时间 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.created_at')"
                  prop="created_at"
                >
                  <el-date-picker
                    v-model="form.created_at"
                    type="datetime"
                    :placeholder="$t('common.created_at_tips')"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 发布状态 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.status')"
                  prop="status"
                >
                  <el-select
                    v-model="form.status"
                    :placeholder="$t('common.status_tips')"
                    clearable
                  >
                    <el-option label="已发布" value="1" />
                    <el-option label="未发布" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

        <el-row :gutter="20" type="flex" justify="center" class="btn-row">
          <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">{{
                $t('common.submit')
              }}</el-button>
              <el-button @click="resetForm">{{ $t('common.reset') }}</el-button>
              <el-button @click="onCancel">{{ $t('common.cancel') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import JspCkeditor from '@/components/JspCkeditor'
import JspImageUpload from '@/components/JspImageUpload'
import JspTags from '@/components/JspTags'

// export
export default {
  name: 'InfoNewsEdit',
  components: {
    JspCkeditor,
    JspImageUpload,
    JspTags
  },
  data() {
    return {
      form: {
        id: 0,
        cate_id: 0,
        title: '',
        subtitle: '',
        cover_image: '2', // 数字之间逗号隔开
        keywords: [],
        description: '',
        content: '',
        href: '',
        href_target: '',
        rel: '',
        hits: 0,
        recommend_type: [],
        is_top: 1,
        created_at: '',
        status: ''
      },
      // 封面图列表: 请求附件接口
      cover_imageList: [{
        id: 2,
        name: 'food.jpeg',
        url: 'http://pic.baike.soso.com/p/20130402/20130402143317-1824467319.jpg',
        path: '/uploads/101.jpg'
      }],
      // 表单输入校验 ，通过prop="name"属性进行控制
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 2, max: 50, message: '字数在 2-50 个', trigger: 'blur' }
        ]
      },
      // 是否置顶，实际项目中来源数据字典
      isTopOptions: [
        { id: 1, text: '不置顶' },
        { id: 2, text: '置顶' }
      ],
      // 路由参数
      routerParams: {}
    }
  },
  computed: {},
  created() {
    this.routerParams = this.$route.params
    this.cate_id = this.routerParams.cate_id
    this.getDetail()
  },
  methods: {
    /** *********************************************** 表单相关 开始 ******************************************************/
    // 内容详情
    async getDetail() {
      // 路由参数
      const { cate_id, id } = this.routerParams
      this.form.id = id
      this.form.cate_id = cate_id
      if (id > 0) {
        // 请求内容接口：数据不存在报异常则关闭当前标签返回上一页
        // 请求附件接口
        // await coding...
      }
    },
    // 提交表单
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 请求内容接口
          console.log(this.form)
          this.$message.success('提交!')
        } else {
          this.$message.error('提交失败!')
          return false
        }
      })
    },
    // 取消/返回
    onCancel() {
      // 删除当前页标签并返回上一页
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
      // this.$message.info('已取消！')
    },
    // 表单重置
    resetForm() {
      this.$refs['form'].resetFields()
    },
    /** *********************************************** 表单相关 结束 ******************************************************/

    /** ******************************************* 封面图上传 开始 **************************************************/
    handleImageUploadSuccss(response, file, fileList) {
      console.log('上传成功事件', response, file, fileList)
      // 判断response是否上传成功
      this.$message.success('上传成功')
    },
    handleImageUploadChange(result) {
      console.log('改变事件', result)
      this.cover_image = this.ids
    }
    /** ******************************************* 封面图上传 结束 **************************************************/
  }
}
</script>

<style scoped lang="scss">
</style>
